<template>
	<view class="content" v-if="JSON.stringify(datajson) != '{}'">
		<u-navbar
			leftIconSize="32rpx" 
			:placeholder="true" 
			:fixed="true" 
			:safeAreaInsetTop="true" 
			:autoBack="true"
			bgColor="#ec6a38"
			:border-bottom="false">
				<view slot="left">
					<u-icon  @click="back" size="42" name="arrow-left" color="#fff"></u-icon>
				</view>
				<view slot="center" style="display: flex;justify-content: center;color: #fff;">
					计划详情
				</view>
				<!-- #ifdef APP-PLUS -->
				<view v-if="datajson.status==1 || datajson.status==2" slot="right" style="color: #fff;" @click="planCancel(datajson.id)">
					取消计划
				</view>
				<!-- #endif -->
			</u-navbar>
		<view class="header">
			<view class="h3">
				订单号:<text>{{datajson.plan_no}}</text>
			</view>
			<view class="headerL">
				<view class="item">
					<view class="h3">
						计划状态
					</view>
					<view class="p">
						<template v-if="datajson.status==1">
							<text style="color: #f9ae3d;">待进行 </text>
						</template>
						<template v-if="datajson.status==2">
							<text style="color: #5ac725;">进行中 </text>
						</template>
						<template v-if="datajson.status==3">
							<text style="color: #3c9cff;">已完成 </text>
						</template>
						<template v-if="datajson.status==4">
							<text style="#909399">已取消 </text>
						</template>
						<template v-if="datajson.status==5">
							<text style="color: #f56c6c;">已失败 </text>
						</template>
					</view>
				</view>
				<view class="item">
					<view class="h3">
						还款总手续费
					</view>
					<view class="span">
						{{datajson.already_produce_charge}}
					</view>
				</view>
			</view>
		</view>
		
		<view style="margin-top: 20rpx;">
			<u-alert :title="datajson.status_message" fontSize="28" type = "error" ></u-alert>
		</view>
		
		<view class="ul">
			<view class="li" style="color: #333;font-size: 30rpx;">
				计划明细
			</view>
			<view class="li">
				<view class="l">
					还款金额
				</view>
				<view class="r">
					{{datajson.amount}}
				</view>
			</view>
			<view class="li">
				<view class="l">
					还款天数
				</view>
				<view class="r">
					{{datajson.days}}
				</view>
			</view>
			<view class="li">
				<view class="l">
					每日还款次数
				</view>
				<view class="r">
					{{datajson.daily_repayment_times}}
				</view>
			</view>
		</view>
		<view class="ul">
			<view class="li" style="color: #333;font-size: 30rpx;">
				还款明细
			</view>
			<view class="li">
				<view class="l">
					已消费金额
				</view>
				<view class="r">
					{{datajson.already_consume_amount}}
				</view>
			</view>
			<view class="li">
				<view class="l">
					已还款金额
				</view>
				<view class="r">
					{{datajson.already_repayment_amount}}
				</view>
			</view>
			<view class="li">
				<view class="l">
					已扣手续费
				</view>
				<view class="r">
					{{datajson.already_produce_charge}}
				</view>
			</view>
		</view>


		<!-- 计划详情 -->
		<view class="jhxq">
			<view class="title">
				计划详情
			</view>
			<view class="items" v-for="(item,i) in datajson.detail " :key="i">
				<view class="t">
					<text v-if="item.status==0" class="ac1">未执行</text>
					<text v-if="item.status==1" class="ac2">进行中</text>
					<text v-if="item.status==2">执行成功</text>
					<text v-if="item.status==3" class="ac3">已失败</text>
				</view>
				<view class="d">
					<view class="l">
						<view class="h3" v-if="item.type == 1">
							消费时间
						</view>
						<view class="h3" v-if="item.type == 2">
							还款时间
						</view>
						<view class="p">
							{{item.run_time}}
						</view>
					</view>
					<view class="r">
						<view class="h3" v-if="item.type == 1">
							消费金额
						</view>
						<view class="h3" v-if="item.type == 2">
							还款金额
						</view>
						<view class="p">
							{{item.amount}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		planInfo,
		planCancel
	} from '@/common/creditcardmachine.api.js'
	export default {
		data() {
			return {
				datajson: {},
				jihua: {
					money: 0,
					cishu: 0,
					day: 1
				},


			}
		},
		onLoad(option) {
			let params = {};
			params.id = option.deCode
			planInfo(params).then(res => {
				this.datajson = res
			})
		},
		methods: {
			back() {
				this.$u.route({
					type: 'navigateBack'
				})
			},
			// 取消计划
			planCancel(id){
				let that = this
				uni.showToast({
					title:'正在取消计划...'
				})
				planCancel({plan_id:id}).then(res => {
					uni.hideLoading()
					that.datajson.status = 4
					uni.showToast({
						title:'取消成功～'
					})
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f4f5f7;
	}
</style>
<style scoped lang="scss">
	.content {
		padding: 20rpx 30rpx;
	}

	.header {
		padding: 0 20rpx;
		background-color: #fff;
		border-radius: 8rpx;

		>.h3 {
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
			font-size: 28rpx;
			border-bottom: 1px solid #eee;

			text {
				font-size: 30rpx;
				font-weight: bold;
			}
		}

		.headerL {
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			padding: 30rpx 0;

			.item {
				width: 50%;
				padding: 0 30rpx;

				&:nth-of-type(1) {
					border-right: 1px solid #eee;
				}

				.h3 {
					color: #a6a6a6;
					font-size: 26rpx;
				}

				.p {
					color: #4398fc;
					margin-top: 20rpx;

					.aa1 {
						color: #ec6a38;
					}

					.aa2 {
						color: #ec6a38;
					}

					.aa3 {
						color: #ec6a38;
					}

					.aa4 {
						color: #b3b3b3;
					}
				}

				.span {
					font-weight: bold;
					margin-top: 20rpx;
				}
			}
		}
	}

	.ul {
		background-color: #fff;
		padding: 20rpx 25rpx;
		margin-top: 20rpx;
		border-radius: 8rpx;
	}

	.li {

		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		line-height: 2;

		.l {
			color: #b3b3b3;

		}

		.r {
			color: #262626;
			font-weight: bold;
		}
	}

	.jhxq {
		margin-top: 20rpx;

		.title {
			padding: 0 25rpx;
			background-color: #fff;
			padding-top: 30rpx;
			padding-bottom: 5rpx;
			font-size: 30rpx;
		}

		.items {
			padding: 15rpx 25rpx;
			margin-bottom: 15rpx;
			background-color: #ffff;
			font-size: 28rpx;
			padding-bottom: 15rpx;

			.t {
				color: #69a565;
				margin-bottom: 15rpx;

				.ac1 {
					color: #b3b3b3;
				}

				.ac2 {
					color: #ec6a38;
				}

				.ac3 {
					color: red;
				}
			}

			.d {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #b3b3b3;

				.p {
					color: #333;
					font-weight: bold;
				}
			}
		}
	}
</style>
